<?php

use home\assets\PageAsset;
use home\models\Category;
use home\models\Product;
use ijony\helpers\Url;
use yii\data\Pagination;

/**
 * @var Category $category
 * @var Product[] $data
 * @var Pagination $pager
 */

PageAsset::register($this)->init([
]);

$this->params['footerColumn'] = 'nomargin-row ';
?>

<div class="container">
    <div class="row color-row tax-color-row">
        <div class="col-sm-12">
            <a href="<?= Url::to(['product/index', 'id' => 1]) ?>" class="col-sm-4 col-xs-12 green"">
            <p>SAG COMPENSATOR<br>电压暂降补偿装置</p>
            </a>
            <a href="<?= Url::to(['product/index', 'id' => 2]) ?>" class="col-sm-4 col-xs-12 red">
                <p>DIGITAL VOLTAGE STABILISERS<br>数码电压稳压器</p>
            </a>
            <a href="<?= Url::to(['product/index', 'id' => 3]) ?>" class="col-sm-4 col-xs-12 blue">
                <p>POWER FACTOR CORRECTION<br>功率因数校正系统 (PFC)</p>
            </a>
        </div>
    </div>
</div>

<div class="container" itemscope itemtype="http://schema.org/Product">
    <div class="row nomargin-row">
        <div class="col-xs-12 text-center green">
            <h1 class="page-title" itemprop="name" style="font-family: robotomedium"><?= $category->name ?></h1>
        </div>
    </div>
    <div class="clear20"></div>
    <?php if ($category->description) { ?>
        <div class="col-sm-12 addpadding testo_pre testo_pre--green">
            <?= $category->description ?>
        </div>
        <div class="btn-container btn-container--green">
            <a class="link-close-readmore link-pre" href="javascript:void(0)" style="display: inline;">阅读更多</a>
        </div>

        <div class="clear20"></div>

    <?php } ?>

    <div class="row nomargin-row">
        <?php foreach ($data as $datum) { ?>
            <div class="col-sm-12 col-xs-12 white addpadding ortea-single" id="gemini-2" itemscope="" itemtype="http://schema.org/Product">
                <div class="col-sm-6 nopadding">
                    <h2 class="dvs-single-category font-lt"><?= $category->name ?></h2>
                    <h3 itemprop="name"><?= $datum->title ?></h3>
                </div>

                <div style="display: none;" itemprop="brand" itemscope="" itemtype="http://schema.org/Organization"><span itemprop="name">Ortea</span></div>
                <div style="display: none;" itemprop="manufacturer" itemscope="" itemtype="http://schema.org/Organization">Manufactured by: <span itemprop="name">Ortea</span></div>
                <div style="display: none;">Model: <span itemprop="model"><?= $datum->title ?></span></div>
                <div style="display: none;">Product ID: <span itemprop="productID">1048</span></div>

                <div class="col-sm-6 text-right ortea-prod hidden-xs">
                    <span class="font-lt"><?= $datum->model ?></span>
                    <br>
                    <span class="font-md"><?= $datum->sub_model ?></span>
                    <br><br><img width="192" src="<?= $datum->getPreview(192, 300) ?>" class="attachment-medium size-medium wp-post-image" loading="lazy" srcset="<?= $datum->getPreview(192, 300) ?> 192w, <?= $datum->getPreview() ?> 354w" sizes="(max-width: 192px) 100vw, 192px">
                </div>
                <div class="col-sm-6 text-right ortea-prod visible-xs nopadding">
                    <span class="font-lt"><?= $datum->model ?></span>
                    <br>
                    <span class="font-md"><?= $datum->sub_model ?></span>
                    <br><br><img width="192" src="<?= $datum->getPreview(192, 300) ?>" class="attachment-medium size-medium wp-post-image" loading="lazy" srcset="<?= $datum->getPreview(192, 300) ?> 192w, <?= $datum->getPreview() ?> 354w" sizes="(max-width: 192px) 100vw, 192px">
                </div>

                <div class="clearfix"></div>
                <div itemprop="description" class="prodtaglio-content-dvs col-xs-12 col-sm-12 nopadding">
                    <?= $datum->content ?>
                </div>

                <div class="clear20"></div>
            </div>
        <?php } ?>
    </div>

    <div class="clear20"></div>
</div>